<template>
  <div>
    <header-comm></header-comm>
    <div class="bcg hotsearch_box">
      <div class="hedlist">
        <div class="headbtn">
          <a-button type="primary" class="editable-add-btn yybtn" @click="cnClick">中文</a-button>
          <a-button type="primary" class="editable-add-btn yybtn" @click="enClick">英文</a-button>
          <a-button type="primary" class="editable-add-btn yybtn" @click="dwClick">德文</a-button>
          <a-button type="primary" class="editable-add-btn yybtn" @click="jaClick">日文</a-button>
          <a-button type="primary" class="editable-add-btn yybtn" @click="ruClick">俄文</a-button>
        </div>
      </div>
      <div class="hotsearch">
        <div class="hotsearch_inp">
          <ul>
            <li>
              <span class="inp_tit">
                <span class="bt">*</span>热门搜索：
              </span>
              <a-textarea
                :rows="4"
                style="width:500px; vertical-align: top;"
                :style="title==''?'border-color:red':''"
                placeholder="请输入热门搜索关键词"
                v-model="title"
              />
              <span class="bz">
                注：每个关键词，请用一个
                <span class="red">空格</span> 或
                <span class="red">英文逗号</span> 隔开
              </span>

              <span class="bz">例：直线轴承,深沟球轴承,调心轴承</span>
              <p class="ts" v-if="title==''">
                <a-icon type="close-circle" />关键词不能为空
              </p>
            </li>
            <!-- <li v-show="enflag">
              <span class="inp_tit">
                <span class="bt">*</span>热门搜索：
              </span>
              <a-textarea
                :rows="2"
                style="width:500px; vertical-align: top;"
                :style="entitle==''?'border-color:red':''"
                placeholder="请输入热门搜索关键词"
                v-model="entitle"
              />
              <span class="bz">
                注：每个关键词，请用一个
                <span class="red">空格</span> 或
                <span class="red">英文逗号</span> 隔开
              </span>

              <span class="bz">例：直线轴承,深沟球轴承,调心轴承</span>
              <p class="ts" v-if="entitle==''">
                <a-icon type="close-circle" />关键词不能为空
              </p>
            </li>
            <li v-show="dwflag">
              <span class="inp_tit">
                <span class="bt">*</span>热门搜索：
              </span>
              <a-textarea
                :rows="2"
                style="width:500px; vertical-align: top;"
                :style="dwtitle==''?'border-color:red':''"
                placeholder="请输入热门搜索关键词"
                v-model="dwtitle"
              />
              <span class="bz">
                注：每个关键词，请用一个
                <span class="red">空格</span> 或
                <span class="red">英文逗号</span> 隔开
              </span>

              <span class="bz">例：直线轴承,深沟球轴承,调心轴承</span>
              <p class="ts" v-if="dwtitle==''">
                <a-icon type="close-circle" />关键词不能为空
              </p>
            </li>
            <li v-show="jaflag">
              <span class="inp_tit">
                <span class="bt">*</span>热门搜索：
              </span>
              <a-textarea
                :rows="2"
                style="width:500px; vertical-align: top;"
                :style="jatitle==''?'border-color:red':''"
                placeholder="请输入热门搜索关键词"
                v-model="jatitle"
              />
              <span class="bz">
                注：每个关键词，请用一个
                <span class="red">空格</span> 或
                <span class="red">英文逗号</span> 隔开
              </span>

              <span class="bz">例：直线轴承,深沟球轴承,调心轴承</span>
              <p class="ts" v-if="jatitle==''">
                <a-icon type="close-circle" />关键词不能为空
              </p>
            </li>
            <li v-show="ruflag">
              <span class="inp_tit">
                <span class="bt">*</span>热门搜索：
              </span>
              <a-textarea
                :rows="2"
                style="width:500px; vertical-align: top;"
                :style="rutitle==''?'border-color:red':''"
                placeholder="请输入热门搜索关键词"
                v-model="rutitle"
              />
              <span class="bz">
                注：每个关键词，请用一个
                <span class="red">空格</span> 或
                <span class="red">英文逗号</span> 隔开
              </span>

              <span class="bz">例：直线轴承,深沟球轴承,调心轴承</span>
              <p class="ts" v-if="rutitle==''">
                <a-icon type="close-circle" />关键词不能为空
              </p>
            </li> -->
            <li class="foot_btn">
              <a-button type="primary" @click="editTKD">提交</a-button>
              <a-button @click="close">取消</a-button>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import headerComm from "../header-comm/header.vue";
import qs from "qs";

export default {
  data() {
    return {
      id_num: "",
      lagType: 0,
      //标题
      title: "",
      // entitle: "",
      // dwtitle: "",
      // rutitle: "",
      // jatitle: "",
      // cnflag: true,
      // enflag: false,
      // dwflag: false,
      // jaflag: false,
      // ruflag: false,
      // //关键字
      // keywords: "",
      // //描述
      // description: "",
      dataName: "",
      language: ""
    };
  },
  components: {
    headerComm
  },
  methods: {
    close() {
      this.getTKD();
    },
    getTKD() {
      this.axios
        .post(
          "kucun/getHostSearch.php",
          qs.stringify({
            sqdwid: this.$store.state.bbl_sqdwid
          })
        )
        .then(res => {
          console.log(res);
          if (res.data.code == 303) {
            this.dataName = res.data.result;
            this.title = res.data.result.hotsearch;
            // this.entitle = res.data.result.hotsearch_en;
            // this.dwtitle = res.data.result.hotsearch_dw;
            // this.rutitle = res.data.result.hotsearch_ru;
            // this.jatitle = res.data.result.hotsearch_ja;
            this.id_num = res.data.result.id_num;
          } else {
            this.$notification["error"]({
              message: "失败",
              description: res.data.msg
            });
          }
        });
    },
    //提交表单添加修改关键词
    editTKD() {
      console.log(this.lagType);
      var tit = this.title.replace(/\s/g, ",");
      this.title=tit
      console.log(tit);
      this.axios
        .post(
          "kucun/setHostSearch.php",
          qs.stringify({
            //授权单位IDd
            sqdwid: this.$store.state.bbl_sqdwid,
            id_num: this.id_num,
            lagType: this.lagType,
            //分类
            hotsearch : tit
            // //地址
            // keywords: this.keywords,
            // //简介
            // description: this.description
          })
        )
        .then(res => {
          console.log(res);
          if (res.data.code == 303) {
            this.$notification["success"]({
              message: "成功",
              description: res.data.msg
            });
             this.getTKD();

          } else {
            this.$notification["error"]({
              message: "失败",
              description: res.data.msg
            });
          }
        });
    },
    cnClick() {
      this.lagType = 0;
      this.title = this.dataName.hotsearch;
      // this.cnflag = true;
      // this.dwflag = this.enflag = this.ruflag = this.jaflag = false;

      // this.keywords = this.dataName.keywords_cn;
      // this.description = this.dataName.description_cn;
    },
    enClick() {
      this.lagType = 1;
      this.title = this.dataName.hotsearch_en;
      // this.enflag = true;
      // this.cnflag = this.dwflag = this.ruflag = this.jaflag = false;
    },
    dwClick() {
      this.lagType = 2;
      this.title = this.dataName.hotsearch_dw;
      // this.dwflag = true;
      // this.cnflag = this.enflag = this.ruflag = this.jaflag = false;

      // this.keywords = this.dataName.keywords_dw;
      // this.description = this.dataName.description_dw;
    },
    jaClick() {
      this.lagType = 3;
      this.title = this.dataName.hotsearch_ja;
      // this.keywords = this.dataName.keywords_ja;
      // this.description = this.dataName.description_ja;
    },
    ruClick() {
      this.lagType = 4;
      this.title = this.dataName.hotsearch_ru;
      // this.keywords = this.dataName.keywords_ru;
      // this.description = this.dataName.description_ru;
    }
  },
  created() {
    this.getTKD();
    // this.language=JSON.parse(sessionStorage.getItem("language"))
  }
};
</script>

<style lang='less'>
// .hedlist {
//   position: relative;
//   top: 65px;
//   width: 98%;
//   left: 1%;
//   height: 60px;
//   background-color: #fff;
//   text-align: left;
//   padding: 15px;
//   .yybtn {
//     margin: 0 10px;
//   }
// }

// .tjgl_hotsearch {
//   width: 62% !important;
//   padding: 30px !important;
//   top: 40px !important;

//   li {
//     margin: 11px 0 !important;
//   }

//   .foot_btn {
//     width: 87% !important;
//   }
// }
.hotsearch_box{
  .hedlist{
    width: 98%!important;
    padding: 0 20px;
    z-index: 99!important;
  }
  .headbtn{
    button{
      margin-right: 20px;
    }
  }
.hotsearch {
  width: 98%;
  height: auto;
  box-shadow: 0px 0px 7px #ccc;
  background-color: #fff;
  margin: 9px auto;
  position: relative;
  top: 63px;
  text-align: left;
  padding: 30px 77px;
  min-height: 500px;
  .red {
    color: red;
  }
  .bz {
    color: #666;
    font-size: 12px;
    width: 90%;
    float: left;
    margin-left: 10%;
    padding: 6px;
  }
  .head {
    display: flex;
    justify-content: space-between;

    i {
      font-size: 20px;
    }
  }

  .hotsearch_inp {
    ul {
      li {
        margin: 20px 0;

        input {
          vertical-align: middle;
        }

        .inp_tit {
          display: inline-block;
          width: 100px;
          text-align: right;

          .bt {
            display: inline-block;
            color: red;
            margin: 0 5px;
          }
        }

        .ts {
          margin: 7px 0 -7px 96px;
          color: red;
          font-size: 12px;
          i {
            margin: 0 5px;
          }
        }
      }

      .foot_btn {
        width: 40%;
        text-align: center;

        button {
          margin: 0 20px;
          width: 150px;
        }
      }
    }
  }
}
}

</style>
